<template>
	<view class="activity-wrap coreshop-padding-10 coreshop-margin-10 coreshop-bg-white coreshop-border-radius-trbl-18"
		v-if="count">
		<view class="coreshop-padding-bottom-10 coreshop-padding-top-10 groupon-title coreshop-min-height-30">
			<view class="title-box coreshop-flex coreshop-justify-between">
				<view class="coreshop-font-16 coreshop-text-black coreshop-font-weight-bold">每日拼团</view>
				<u-icon name="arrow-right-double" size="12" label="查看更多" labelSize="12" labelPos="left"
					@tap="goPinTuanList()"></u-icon>
			</view>
		</view>
		<view class="coreshop-divider">
			<view class="complete"></view>
		</view>
		<scroll-view class="scroll-box" scroll-x scroll-anchoring>
			<view class="goods-box coreshop-flex  coreshop-justify-between coreshop-text-black">
				<view class="min-goods" v-for="(item, index) in coreshopData.parameters.list" :key="index"
					@tap="goPinTuanDetail(item.id)">
					<view class="img-box">
						<image class="img" :src="item.goodThumbnail" mode=""></image>
					</view>
					<view class="item-card-bottom coreshop-padding-10">
						<view class="goods-title u-line-1">{{ item.name }}</view>
						<view class="price coreshop-margin-bottom-5">{{item.pinTuanPrice}}</view>

						<view class="coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-between">
							<view class="original-price">￥{{ item.pinTuanPrice + item.discountAmount }}</view>
							<view class="coreshop-font-10">
								<u-tag :text="'限购'+item.maxNums" type="warning" plain plainFill size="mini"
									v-if="item.maxNums>0"></u-tag>
								<u-tag text="不限购" type="success" plain plainFill size="mini" v-if="item.maxNums==0"></u-tag>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "coreshopPinTuan",
		props: {
			coreshopData: {
				required: false,
			}
		},
		data() {
			return {
				goodsList: [],
				swiperCurrent: 0
			};
		},
		created() {
			let that = this;
			if (that.coreshopData.parameters.list.length > 0) {
				let arr = that.sortData(that.coreshopData.parameters.list, 4);
				that.goodsList = arr;
			}
		},
		computed: {
			count() {
				return (this.coreshopData.parameters.list.length > 0)
			}
		},
		methods: {
			swiperChange(e) {
				this.swiperCurrent = e.detail.current;
			},
			// 数据分层
			sortData(oArr, length) {
				let arr = [];
				let minArr = [];
				oArr.forEach(c => {
					if (minArr.length === length) {
						minArr = [];
					}
					if (minArr.length === 0) {
						arr.push(minArr);
					}
					minArr.push(c);
				});
				return arr;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.activity-wrap {
		background-color: #fff;
		min-height: 150px;
		background: linear-gradient(#faecca 20%, #ffffff 30%, #ffffff 100%);

		.groupon-title {
			background: url($apiFilesUrl+'/static/images/pinTuan/groupon_title_bg.png') no-repeat;
			background-position: center top;
			background-size: 100% auto;
		}

		.title-box {
			.title-text {
				font-size: 16px;
				font-weight: bold;
				color: #333333;
			}

			.more-box {
				.more-text {
					font-size: 11px;
					font-weight: 500;
					color: #333333;
				}

				.more-icon {
					font-size: 12px;
					color: #333333;
				}
			}
		}

		.scroll-box,
		.goods-box {
			min-height: 190px;
			width: 100%;
		}
	}

	// 商品卡片
	.min-goods {
		background: #fffaef;
		box-shadow: 0px 3.5px 4px 0.5px rgba(162, 117, 27, 0.24);
		border-radius: 5px;
		margin-right: 15px !important;

		.img-box {
			width: 140px;
			height: 140px;
			overflow: hidden;
			position: relative;
			border-radius: 5px 5px 0 0;

			.img {
				width: 140px;
				height: 140px;
				background-color: #ccc;
			}
		}

		.item-card-bottom {
			min-height: 75px;
			background: url($apiFilesUrl+'/static/images/pinTuan/groupon_goods_bg.png') no-repeat;
			background-position: bottom center;
			background-size: 100% 100%;
		}

		.goods-title {
			font-size: 13px;
			font-weight: 500;
			color: #000000;
			line-height: 13px;
			margin-bottom: 5px;
		}

		.price {
			font-size: 15px;
			font-weight: 500;
			color: #ff0000;

			&::before {
				content: '￥';
				font-size: 12px;
			}
		}

		.original-price {
			font-size: 20rpx;
			font-weight: 500;
			text-decoration: line-through;
			color: #c4c4c4;
		}

		.groupon-num-box {
			.avatar-box {
				direction: rtl;
				unicode-bidi: bidi-override;
				height: 30rpx;

				.avatar-img {
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
					background-color: #f5f5f5;
				}
			}

			.groupon-num-text {
				font-size: 18rpx;
				font-weight: 500;
				color: #e9b461;
			}
		}
	}
</style>